<template>
  <div>
    <a-modal :visible="visible" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" top="200px" width="900px" :mask-closable="false">
      <template #title> 选择出库货品 </template>
      <div style="display: flex">
        <FilterTable :filterItem="filterItem" :isReset="false" :is-show-tag="false" @search="searchByVal" />
      </div>

      <div style="margin-top: 10px">
        <a-table size="mini" class="table-singe-line" ref="table" :loading="loading" row-key="id" @selection-change="selectRow" :row-selection="rowSelection" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: '300px' }">
          <template #columns>
            <a-table-column title="序号" width="40">
              <template #cell="{ record, rowIndex }">
                <span>{{ rowIndex + 1 }}</span>
              </template>
            </a-table-column>
            <a-table-column title="仓库名称" width="100">
              <template #cell="{ record, rowIndex }">
                <a-popover>
                  <p style="width: 100%" class="text-limit">{{ record.warehouseName }}</p>
                  <template #content>
                    <p>{{ record.warehouseName }}</p>
                  </template>
                </a-popover>
              </template>
            </a-table-column>
            <a-table-column title="店铺" width="100">
              <template #cell="{ record, rowIndex }">
                <TextHidden position="top" :rows="1">{{ record.shopName }}</TextHidden>
                <!-- <a-popover>
                  <p style="width: 100%" class="text-limit">{{ record.warehouseName }}</p>
                  <template #content>
                    <p>{{ record.warehouseName }}</p>
                  </template>
                </a-popover> -->
              </template>
            </a-table-column>
            <a-table-column title="货主" :width="90" #cell="{ record, rowIndex }"> {{ record.ownerName }} </a-table-column>
            <a-table-column title="图片" width="60">
              <template #cell="{ record, rowIndex }">
                <ImgPopover :src="record.productImg">
                  <template #con>
                    <a-image width="40" height="40" fit="contain" :src="record.productImg" />
                  </template>
                </ImgPopover>
              </template>
            </a-table-column>
            <a-table-column title="产品名称/SKU" width="120">
              <template #cell="{ record, rowIndex }">
                <a-popover>
                  <p style="color: #619bd8; width: 100%" class="text-limit">{{ record.productName }}</p>
                  <p style="color: #619bd8; width: 100%" class="text-limit">
                    <span>{{ record.sku }}</span>
                  </p>
                  <template #content>
                    <p>{{ record.productName }}</p>
                    <p>{{ record.sku }}</p>
                  </template>
                </a-popover>
              </template>
            </a-table-column>
            <a-table-column title="MSKU/FNSKU" width="120">
              <template #cell="{ record, rowIndex }">
                <a-popover>
                  <p style="width: 100%" class="text-limit">
                    {{ record.msku }}
                  </p>
                  <p style="width: 100%" class="text-limit">
                    {{ record.fnsku }}
                  </p>
                  <template #content>
                    <p>{{ record.msku }}</p>
                    <p>{{ record.fnsku }}</p>
                  </template>
                </a-popover>
              </template>
            </a-table-column>
            <a-table-column title="库存属性" width="80">
              <template #cell="{ record, rowIndex }">{{ record.attribute == 'good' ? '良品' : '次品' }} </template>
            </a-table-column>
            <a-table-column title="库位编号" width="100">
              <template #cell="{ record, rowIndex }">{{ record.locationCode }} </template>
            </a-table-column>
            <a-table-column title="可用量" width="60">
              <template #cell="{ record, rowIndex }">{{ record.amtAvailable }} </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { findInventoryList } from '@/api/warehouse'
  import FilterKeyword from '@/components/Form/filterKeyword.vue'
  import FilterTable from '@/components/TableFilter.vue'
  import { getCategoryList } from '@/api/product'
  import { getOrganizesUser } from '@/api/system'
  import { Message } from '@arco-design/web-vue'
  export default defineComponent({
    props: ['warehouseCode', 'shopId', 'ownerId'],
    components: { FilterKeyword, FilterTable },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const table = ref()
      const data: any = reactive({
        searchValue: {},
        filterItem: [
          {
            type: 'input_keyword',
            key: 'skus',
            keyItems: [
              { label: 'SKU', value: 'skus' },
              { label: 'SPU', value: 'spus' },
              { label: 'MSKU', value: 'mskus' },
              { label: 'FNSKU', value: 'fnskus' },
              { label: '产品名称', value: 'productName' },
            ],
            keyWidth: '90',
            value: ref(),
            placeholder: '请输入',
            label: 'SKU',
            width: 180,
            isMultiple: true,
          },
          {
            key: 'ownerIds',
            label: '选择货主',
            value: ref([]),
            type: 'select_multiple',
            width: 160,
            optionItems: [],
          },
          {
            type: 'cascader',
            key: 'cateId',
            optionItems: [],
            keyWidth: '120',
            value: ref(),
            placeholder: '请选择类目',
            label: '类目',
            width: 160,
            isMultiple: true,
          },
          {
            key: 'attribute',
            label: '库存属性',
            value: ref(),
            type: 'select',
            width: 100,
            optionItems: [
              { label: '良品', value: 'good' },
              { label: '次品', value: 'defective' },
            ],
          },
        ],
        categoryOptions: [],
        tableList: [],
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false,
        },
        selectList: [],
        loading: false,
      })

      const open = () => {
        data.tableList = []
        getCategory()
        getList()
        getUserList()
        if (props.ownerId) {
          data.filterItem[1].value = []
          data.filterItem[1].value.push(props.ownerId)
        }
      }

      // 获取人员
      const getUserList = async () => {
        let params = {
          depart: false,
          needRole: false,
          pageNum: 1,
          pageSize: 1000,
        }
        const res = await getOrganizesUser(params)
        let arr = res?.data?.records || []
        arr.map((e: any) => {
          e.label = e.userName
          e.value = e.id
        })
        data.filterItem[1].optionItems = arr
      }

      const handleOk = () => {
        let arr: any = []
        data.selectList.forEach((e: any) => {
          let obj = data.tableList.find((el: any) => el.id == e)
          if (obj) arr.push(obj)
        })
        emit('save', arr)
        visible.value = false
        data.selectList.forEach((e: any) => {
          table.value.select(e, false)
        })
      }
      const handleCancel = () => {
        data.selectList.forEach((e: any) => {
          table.value.select(e, false)
        })
        visible.value = false
      }
      const searchKeyword = (info: any) => {
        data.searchValue[info.code] = info.value
        getList()
      }
      const getCategory = async () => {
        const res: any = await getCategoryList()
        data.filterItem[2].optionItems = res.data
      }
      const cascaderChange = (val: string) => {
        getList()
      }
      const selectRow = (val: any) => {
        data.selectList = val
      }

      const searchByVal = (val: any) => {
        data.searchValue = val
        getList()
      }

      const getList = async () => {
        let params = {
          ...data.searchValue,
          warehouseCode: props.warehouseCode,
          shopIds: props.shopId,
          pageNum: 1,
          pageSize: 50,
        }

        if (props.ownerId) {
          params.ownerIds = props.ownerId
        }

        data.loading = true
        const res = await findInventoryList(params)
        data.tableList = res?.data || []
        data.loading = false
      }
      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        searchKeyword,
        cascaderChange,
        selectRow,
        table,
        getList,
        searchByVal,
      }
    },
  })
</script>

<style lang="less" scoped></style>
